<template>
  <div class="tw-main">
    <div class="screen" style="padding-top:10px">
      <!-- <el-row class="tw-grid">
        <el-col :md="24" :lg="8" class="tw-grid__left">
          <tw-card
          :label="$t('m.fullDataSynSta')"
          >
            <div class="tw-box">
              <tw-echarts
                id="echarts_businessData"
                ref="echarts_businessData"
                :additionalOptions="additionalOptions['echarts_businessData']"
                height="82vh"
              ></tw-echarts>
            </div>
          </tw-card>
        </el-col>
        <el-col :md="24" :lg="8" class="tw-grid__single">
          <tw-card
          :label="$t('m.dataExchangeMonitor')"
          >
            <tw-echarts
              id="echarts_dataChangeMonitoring"
              ref="echarts_dataChangeMonitoring"
              :additionalOptions="additionalOptions['echarts_dataChangeMonitoring']"
              height="82vh"
            ></tw-echarts>
          </tw-card>
        </el-col>
      </el-row> -->
    <el-row
      type="flex"
      justify="space-between"
      :gutter="20"
      style="align-items: stretch"
    >
      <!-- 左侧 -->
      <el-col :span="12" v-show="showall">
        <tw-card
          label="学校"
          style="min-height: 458px"
          :isBorder="true"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': schooldegree==='1'}" @click="changeDegree('1', 'school')">
                <div>小学学校数量</div>
                <div><span class="digi xnum">{{schoolData.xs.num}}</span><span>所</span></div>
                <div>预测未来3年学校缺口</div>
                <div><span class="digi xnum">{{schoolData.xs.need}}</span><span>所</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': schooldegree==='2'}" @click="changeDegree('2', 'school')">
                <div>初中学校数量</div>
                <div><span class="digi xnum">{{schoolData.cz.num}}</span><span>所</span></div>
                <div>预测未来3年学校缺口</div>
                <div><span class="digi xnum">{{schoolData.cz.need}}</span><span>所</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': schooldegree==='3'}" @click="changeDegree('3', 'school')">
                <div>高中学校数量</div>
                <div><span class="digi xnum">{{schoolData.gz.num}}</span><span>所</span></div>
                <div>预测未来3年学校缺口</div>
                <div><span class="digi xnum">{{schoolData.gz.need}}</span><span>所</span></div>
              </div>
            </div>
            <tw-linebar source="school" :tjnf="tjnf" :degree="schooldegree"></tw-linebar>
          </div>
          <div class="tw-grade-left text-highlight" v-else>
            <div class="tw-grade-left-text">
              <div class="xtitle">学校名称</div>
              <div class="xbody">{{currentSchool.name}}</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</div>
              <div class="xbody">{{currentSchool.xq}}</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">常住人口</div>
              <div class="xbody">{{currentSchool.rk}}人</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">学校类型</div>
              <div class="xbody">{{currentSchool.lx}}</div>
            </div>
            <div class="tw-grade-left-text">
              <div class="xtitle">学校地址</div>
              <div class="xbody">{{currentSchool.dz}}</div>
            </div>
          </div>
        </tw-card>

        <tw-card
          label="教学及辅助用房面积"
          :isBorder="true"
          class="tw-title-forecase-mt"
          style="min-height: 458px"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': housedegree==='1'}" @click="changeDegree('1', 'house')">
                <div>小学现有面积</div>
                <div>
                  <span class="digi xnum">{{houseData.xs.num}}</span>
                  <span class="text-suupminl-jx digi">M</span>
                  <span class="text-superior-jx digi">2</span>
                </div>
                <div>预测未来3年面积缺口</div>
                <div>
                  <span class="digi xnum">{{houseData.xs.need}}</span>
                  <span class="text-suupminl-jx digi">M</span>
                  <span class="text-superior-jx digi">2</span>
                </div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': housedegree==='2'}" @click="changeDegree('2', 'house')">
                <div>初中现有面积</div>
                <div>
                  <span class="digi xnum">{{houseData.cz.num}}</span>
                  <span class="text-suupminl-jx digi">M</span>
                  <span class="text-superior-jx digi">2</span>
                </div>
                <div>预测未来3年面积缺口</div>
                <div>
                  <span class="digi xnum">{{houseData.cz.need}}</span>
                  <span class="text-suupminl-jx digi">M</span>
                  <span class="text-superior-jx digi">2</span>
                </div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': housedegree==='3'}" @click="changeDegree('3', 'house')">
                <div>高中现有面积</div>
                <div>
                  <span class="digi xnum">{{houseData.gz.num}}</span>
                  <span class="text-suupminl-jx digi">M</span>
                  <span class="text-superior-jx digi">2</span>
                </div>
                <div>预测未来3年面积缺口</div>
                <div>
                  <span class="digi xnum">{{houseData.gz.need}}</span>
                  <span class="text-suupminl-jx digi">M</span>
                  <span class="text-superior-jx digi">2</span>
                </div>
              </div>
            </div>
            <tw-linebar source="house" :tjnf="tjnf" :degree="housedegree"></tw-linebar>
          </div>
          <div v-else>
            <div class="tw-grade-school">
              <div>当前面积：
                <span class="digi xnum">{{currentHouse.dqmj}}</span>
                <span class="text-suupminl-jx digi">M</span>
                <span class="text-superiordigi">2</span>
                <span class="pl-30">生均面积：</span>
                <span class="digi xnum">{{currentHouse.sjmj}}</span>
                <span class="text-suupminl-jx digi">M</span>
                <span class="text-superior-jx digi">2</span>
              </div>
              <div>预测下一年度需要面积：
                <span class="digi xnum">{{currentHouse.ycmj}}</span>
                <span class="text-suupminl-jx digi">M</span>
                <span class="text-superior-jx digi">2</span>
                <span class="pl-30">缺少面积：</span>
                <span class="digi xnum text-error">{{currentHouse.qsmj}}</span>
                <span class="text-suupminl-jx digi">M</span>
                <span class="text-superior-jx digi">2</span>
              </div>
            </div>
            <tw-linebarsc
              source="house"
              :dataset="currentHouse.dataset"
              :chartDataMaps="currentHouse.chartDataMaps">
            </tw-linebarsc>
          </div>
        </tw-card>
      </el-col>

      <!-- 中部 -->
      <!-- <el-col :span="8" style="padding:0">
        <tw-midhead></tw-midhead>
        <div
          label=""
          class="tw-title-forecase-mt tw-middle-card"
        >
          <div :style="{height:'836px',width:'100%'}" id="myEchart">
            <tw-map :clickDown="false" :mapWidth="'635px'"></tw-map>
          </div>
        </div>
      </el-col> -->
      <!-- /中部 -->
      <!-- 右侧 -->
      <el-col :span="12" v-show="showall">
        <tw-card
          label="学生"
          style="min-height: 458px"
          :grayRightLabel="true"
          link="forecase"
          :isBorder="true"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': studentdegree==='1'}" @click="changeDegree('1', 'student')">
                <div>小学学生数量</div>
                <div><span class="digi xnum">{{studentData.xs.num}}</span><span>人</span></div>
                <div>预测未来3年学生</div>
                <div><span class="digi xnum">{{studentData.xs.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': studentdegree==='2'}" @click="changeDegree('2', 'student')">
                <div>初中学生数量</div>
                <div><span class="digi xnum">{{studentData.cz.num}}</span><span>人</span></div>
                <div>预测未来3年学生</div>
                <div><span class="digi xnum">{{studentData.cz.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': studentdegree==='3'}" @click="changeDegree('3', 'student')">
                <div>高中学生数量</div>
                <div><span class="digi xnum">{{studentData.gz.num}}</span><span>人</span></div>
                <div>预测未来3年学生</div>
                <div><span class="digi xnum">{{studentData.gz.need}}</span><span>人</span></div>
              </div>
            </div>
            <tw-linebar source="student" :tjnf="tjnf" :degree="studentdegree"></tw-linebar>

          </div>
          <div v-else>
            <div class="tw-grade-school">
              <div>
                当前学生人数：<span class="digi xnum">{{currentStudent.xsrs}}</span>人
                <span class="pl-30">预测下一年度小学学生：</span>
                <span class="digi xnum">{{currentStudent.ycxsrs}}</span>人</div>
              <div>
                当前学位数量：<span class="digi xnum">{{currentStudent.xsxws}}</span>人
                <span class="pl-30">预测下一年度缺失学位：</span>
                <span class="digi xnum text-error">{{currentStudent.ycxwrs}}</span>人
              </div>
            </div>
            <tw-linebarsc
              source="student"
              :dataset="currentStudent.dataset"
              :chartDataMaps="currentStudent.chartDataMaps">
            </tw-linebarsc>
          </div>
        </tw-card>
        <tw-card
          label="教师"
          :grayRightLabel="true"
          :isBorder="true"
          class="tw-title-forecase-mt"
          style="min-height: 458px"
        >
          <div class="pad-20" v-if="bigArea">
            <div class="tw-grade-textcard">
              <div class="tw-grade-textcard-item" :class="{'xactive': teacherdegree==='1'}" @click="changeDegree('1', 'teacher')">
                <div>小学教师数量</div>
                <div><span class="digi xnum">{{teacherData.xs.num}}</span><span>人</span></div>
                <div>预测未来3年教师缺口</div>
                <div><span class="digi xnum">{{teacherData.xs.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': teacherdegree==='2'}" @click="changeDegree('2', 'teacher')">
                <div>初中教师数量</div>
                <div><span class="digi xnum">{{teacherData.cz.num}}</span><span>人</span></div>
                <div>预测未来3年教师缺口</div>
                <div><span class="digi xnum">{{teacherData.cz.need}}</span><span>人</span></div>
              </div>
              <div class="tw-grade-textcard-item" :class="{'xactive': teacherdegree==='3'}" @click="changeDegree('3', 'teacher')">
                <div>高中教师数量</div>
                <div><span class="digi xnum">{{teacherData.gz.num}}</span><span>人</span></div>
                <div>预测未来3年教师缺口</div>
                <div><span class="digi xnum">{{teacherData.gz.need}}</span><span>人</span></div>
              </div>
            </div>
            <tw-linebar source="teacher" :tjnf="tjnf" :degree="teacherdegree"></tw-linebar>
          </div>
          <div v-else>
            <div class="tw-grade-school">
              <div>
                当前教师人数：<span class="digi xnum">{{currentTeacher.dqjsrs}}</span>人
                <span class="pl-30">当前每百名学生教师数：</span>
                <span class="digi xnum">{{currentTeacher.dqbmxsjss}}</span>人</div>
              <div>
                预测下一年度需要教师数据<span class="digi xnum">{{currentTeacher.ycjsrs}}</span>人
                <span class="pl-30">缺少教师：</span>
                <span class="digi xnum text-error">{{currentTeacher.qsjs}}</span>人
              </div>
            </div>
            <tw-linebarsc
              source="teacher"
              :dataset="currentTeacher.dataset"
              :chartDataMaps="currentTeacher.chartDataMaps">
            </tw-linebarsc>
          </div>
        </tw-card>
      </el-col>
      <!-- /右侧 -->
    </el-row>
    </div>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwLinebar from './linebar.vue'
import TwLinebarsc from './linebarschool.vue'
import TwChart from '@/components/TwChart.vue'
import TwMidhead from '@/components/tw-midhead/index.js'
// import TwMap from '@/components/tw-map/index.js'
import TwMap from '@/components/tw-map/TwMap.vue'
export default{
  created () {
    let vm = this
    if (vm.$route.query.areaid) {
      vm.curAreaId = vm.$route.query.areaid
    } else {
      vm.curAreaId = '131000'
    }
    vm.initData()
    let date = new Date()
    vm.tjnf = (date.getFullYear() - 1) + ''
    let queryData = {
      tjnf: vm.tjnf
    }

    vm.app_jxszhjy_fwnlfx_ycwlsnxxqk(queryData)
    vm.app_jxszhjy_fwnlfx_xx_jxyfmjqk(queryData)

    vm.app_jxszhjy_fwnlfx_jsqksl(queryData)
    vm.app_jxszhjy_fwnlfx_wlsnxszs(queryData)
    vm.app_jxszhjy_fwnlfx_yyxxsl(queryData)
    vm.app_jxszhjy_fwnlfx_xyjxjfzyfmj(queryData)
    vm.app_jxszhjy_fwnlfx_xyjssl(queryData)
    vm.app_jxszhjy_fwnlfx_xyxsrs(queryData)
    this.timeout = setInterval(() => {
      let i = parseInt(vm.schooldegree)
      i += 1
      if (i >= 4) {
        i = 1
      }
      vm.schooldegree = i + ''
      vm.housedegree = i + ''
      vm.studentdegree = i + ''
      vm.teacherdegree = i + ''
    }, 10000)
  },
  destroyed () {
    clearInterval(this.timeout)
  },
  data () {
    return {
      showall: true,
      timeout: null,
      indexSchoolName: '学位预警',
      curAreaId: '131000',
      tjnf: '2019',
      endtime: '2019-03',
      currentActive: 6,
      bigArea: true,
      schooldegree: '1',
      housedegree: '1',
      studentdegree: '1',
      teacherdegree: '1',
      schoolData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      houseData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      studentData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      teacherData: {
        xs: {
          num: 0,
          need: 0
        },
        cz: {
          num: 0,
          need: 0
        },
        gz: {
          num: 0,
          need: 0
        }
      },
      currentSchool: {
        name: '',
        xq: '',
        rk: '',
        lx: '',
        dz: ''
      },
      currentHouse: {
        dqmj: '',
        ycmj: '',
        sjmj: '',
        qsmj: '',
        dataset: [],
        chartDataMaps: []
      },
      currentStudent: {
        xsrs: '',
        ycxsrs: '',
        xsxws: '',
        ycxwrs: '',
        dataset: [],
        chartDataMaps: []
      },
      currentTeacher: {
        dqjsrs: '',
        dqbmxsjss: '',
        ycjsrs: '',
        qsjs: '',
        dataset: [],
        chartDataMaps: []
      }
    }
  },
  methods: {
    initData () {
      // let vm = this
      // vm.$axios.get('/static/weishidataview/jsondata/graduategongshu.json',
      //   {
      //     baseURL:''
      //   }
      // ).then((resp) => {
      //   vm.schoolData = resp.data.schoolData
      //   vm.houseData = resp.data.houseData
      //   vm.studentData = resp.data.studentData
      //   vm.teacherData = resp.data.teacherData
      //   console.log(vm.schoolData)
      // }).catch((err) => {
      //   console.log(err)
      // })
    },
    getShowAll (params) {
      this.showall = params
    },
    getSchool (params) {
      let vm = this
      if (params) {
        vm.bigArea = false
        vm.currentSchool = params
        if (params.house) {
          vm.currentHouse = params.house
          vm.currentStudent = params.school
          vm.currentTeacher = params.teacher
        } else {
          vm.currentHouse = {
            dqmj: '',
            ycmj: '',
            sjmj: '',
            qsmj: '',
            dataset: [],
            chartDataMaps: []
          }
          vm.currentStudent = {
            xsrs: '',
            ycxsrs: '',
            xsxws: '',
            ycxwrs: '',
            dataset: [],
            chartDataMaps: []
          }
          vm.currentTeacher = {
            dqjsrs: '',
            dqbmxsjss: '',
            ycjsrs: '',
            qsjs: '',
            dataset: [],
            chartDataMaps: []
          }
        }
      } else {
        this.bigArea = true
      }
    },
    changeDegree (degree, area) {
      let vm = this
      if (area === 'school') {
        vm.schooldegree = degree
      } else if (area === 'house') {
        vm.housedegree = degree
      } else if (area === 'student') {
        vm.studentdegree = degree
      } else if (area === 'teacher') {
        vm.teacherdegree = degree
      }
    },
    // 服务能力分析-预测未来三年学校缺口
    app_jxszhjy_fwnlfx_ycwlsnxxqk (queryData) {
      let vm = this
      vm.$axios
        .post('/tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_ycwlsnxxqk', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.schoolData.xs.need = item.xxqksl
                } else if (item.jyjd === '初中') {
                  vm.schoolData.cz.need = item.xxqksl
                } else if (item.jyjd === '高中') {
                  vm.schoolData.gz.need = item.xxqksl
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析-预测未来三年教学用房面积缺口
    app_jxszhjy_fwnlfx_xx_jxyfmjqk (queryData) {
      let vm = this
      vm.$axios
        .post('/tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xx_jxyfmjqk', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.houseData.xs.need = item.jxyfmjqk
                } else if (item.jyjd === '初中') {
                  vm.houseData.cz.need = item.jxyfmjqk
                } else if (item.jyjd === '高中') {
                  vm.houseData.gz.need = item.jxyfmjqk
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    },

    // 服务能力分析-预测未来三年教师缺口数量
    app_jxszhjy_fwnlfx_jsqksl (queryData) {
      let vm = this
      vm.$axios
        .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_jsqksl', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.teacherData.xs.need = item.jsqksl
                } else if (item.jyjd === '初中') {
                  vm.teacherData.cz.need = item.jsqksl
                } else if (item.jyjd === '高中') {
                  vm.teacherData.gz.need = item.jsqksl
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析-预测未来三年学生总数
    app_jxszhjy_fwnlfx_wlsnxszs (queryData) {
      let vm = this
      vm.$axios
        .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_wlsnxszs', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.studentData.xs.need = item.wlsnxszs
                } else if (item.jyjd === '初中') {
                  vm.studentData.cz.need = item.wlsnxszs
                } else if (item.jyjd === '高中') {
                  vm.studentData.gz.need = item.wlsnxszs
                }
              })
            }
          },
          (response) => {
            console.log(response)
          }
        )
    },
    // 服务能力分析-现有学校数量-不同教育阶段
    app_jxszhjy_fwnlfx_yyxxsl (queryData) {
      let vm = this
      vm.$axios
        .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_yyxxsl', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.schoolData.xs.num = item.yyxxsl
                } else if (item.jyjd === '初中') {
                  vm.schoolData.cz.num = item.yyxxsl
                } else if (item.jyjd === '高中') {
                  vm.schoolData.gz.num = item.yyxxsl
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析_现有教学及辅助用房面积-不同教育阶段
    app_jxszhjy_fwnlfx_xyjxjfzyfmj (queryData) {
      let vm = this
      vm.$axios
        .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xyjxjfzyfmj', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.houseData.xs.num = item.sjjfzyfmj
                } else if (item.jyjd === '初中') {
                  vm.houseData.cz.num = item.sjjfzyfmj
                } else if (item.jyjd === '高中') {
                  vm.houseData.gz.num = item.sjjfzyfmj
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析-现有教师数量-不同教育阶段
    app_jxszhjy_fwnlfx_xyjssl (queryData) {
      let vm = this
      vm.$axios
        .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xyjssl', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.teacherData.xs.num = item.zgjssl
                } else if (item.jyjd === '初中') {
                  vm.teacherData.cz.num = item.zgjssl
                } else if (item.jyjd === '高中') {
                  vm.teacherData.gz.num = item.zgjssl
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    },
    // 服务能力分析-现有学生人数-不同教育阶段
    app_jxszhjy_fwnlfx_xyxsrs (queryData) {
      let vm = this
      vm.$axios
        .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xyxsrs', queryData)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.jyjd === '小学') {
                  vm.studentData.xs.num = item.xsrs
                } else if (item.jyjd === '初中') {
                  vm.studentData.cz.num = item.xsrs
                } else if (item.jyjd === '高中') {
                  vm.studentData.gz.num = item.xsrs
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    }
  },
  props: [],
  // data () {
  //   return {
  //     additionalOptions: {
  //       echarts_businessData: {},
  //       echarts_dataChangeMonitoring: {}
  //     }
  //   }
  // },
  components: {
    TwCard,
    TwEcharts,
    TwLinebar,
    TwLinebarsc,
    TwChart,
    TwMidhead,
    TwMap
  }
}
</script>

<style lang="scss" scoped>
.tw-grade-left {
  padding: 40px;
}
.tw-grade-left-text {
  display: flex;
  align-items: center;
  font-size: 16px;
  .xtitle {
    height: 54px;
    background: url(~@/assets/images/pic-bkg-mc.png) center no-repeat;
    background-size: 100%;
    width: 30%;
    line-height: 54px;
    padding-left: 27px;
    text-align: center;
  }
  .xbody {
    padding-left: 10px;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.tw-grade-textcard {
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  margin-bottom: 11px;
}
.tw-grade-textcard-item {
  border: 1px solid #05388f;
  color: #bad3ff;
  padding: 5px 10px;
  width: 32%;
  &.xactive {
    border: 1px solid #07ffff;
    color:#07ffff
  }
  .xnum {
    font-size: 22px;
    padding-right: 5px;
  }
}
.tw-grade-school {
  text-align: center;
  font-size: 16px;
  margin: 20px 0;
  line-height: 1.5;
  .xnum {
    font-size: 21px;
    padding-right: 5px;
  }
  .pl-30 {
    padding-left: 30px;
  }
}
.pad-20 {
  padding: 0 20px
}

// 新添加样式
.tw-title-forecase-mt{
  margin-top: 20px !important;
}
.text-suupminl-jx{
  font-size:16px !important ;
}
.text-superior-jx{
  vertical-align: super;
  font-size: 15px;
}
.screen{
  padding: 0 20px;
}

</style>
